<template>
    <div :id="chartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    options: {
        required: true,
        type: Object
    }
})

const chartRef = ref(Math.random().toString(36).substring(2)); // 生成唯一ID
let chartInstance = null;

const styleOptions = {
    title: {
        textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'bolder',
            fontFamily: 'sans-serif',
            fontSize: 16,
            lineHeight: 56
        }
    },
    color: [
        "#FFD700", // 荧光黄 (高亮)
        "#019D96", // 绿
        "#02A4DE", // 激光蓝 
        "#8A2BE2", // 量子紫 
        "#FF6374", // 番茄红
        "#87C847", // 赛博绿 
        "#1A73E8"  // 深空蓝 
    ],
    
}

const initChart = () => {
    const dom = document.getElementById(chartRef.value);
    if (!dom) return;

    chartInstance = echarts.init(dom);
    chartInstance.setOption(styleOptions);
    chartInstance.setOption(props.options);
};

onMounted(initChart);
watch(() => props.options, initChart, { deep: true });
</script>